<template>
<div class="content">
    <div class="info-box">
        <div class="steps-box">
            <el-steps :active="0" finish-status="success" align-center>
                <el-step title="基本信息"></el-step>
                <el-step title="品类/尺寸"></el-step>
                <el-step title="盒型"></el-step>
                <el-step title="色系"></el-step>
                <el-step title="包装体现"></el-step>
                <el-step title="工艺"></el-step>
            </el-steps>
        </div>
        

        <el-form ref="form" :model="prodictInfo" label-width="80px" 
            :rules="regRules">
            <el-form-item label="品牌名称" prop="userName">
                <el-input v-model="prodictInfo.userName" style="width:80%" autofocus required/>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="prodictInfo.sex">
                    <el-radio v-for="(item,index) in sexData" :key="index" :label=item.dictValue>{{item.dictLabel}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄">
                <el-radio-group v-model="prodictInfo.age" class="radio-group">
                    <el-radio v-for="(item,index) in ageData" :key="index" :label=item.dictValue>{{item.dictLabel}}</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div class="button-box">
            <el-button type="primary" @click="nextStep">下一步</el-button>
        </div>
    </div> 
</div>
</template>

<script>
import { list } from "../../../api/monitor/operlog"
import {getDicts} from "@/api/design/dict/data"
export default {
    data() {
        return {
			productDictVo:{
			list:[],
			parentId:null,
			},
			list: [],
            sexData:[],
            ageData:[],
            prodictInfo:{},
            regRules : {
                userName:[
                    {required:true,message:'请输入用户姓名',trigger:'blur'}
                ],
            }
        }
    },
    methods: {
        nextStep(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.$router.push({path:'/category', 
                        query: {userName: this.prodictInfo.userName,
                            sex:this.prodictInfo.sex,
                            age:this.prodictInfo.age}})
                }
            })
        }
    },
    computed: {
    formIsFilled() {
        return this.prodictInfo.userName.trim().length > 0;
        }
    },
    created() {
		this.list.push("user_sex","user_age")
		this.productDictVo.list=this.list
		this.productDictVo.parentId=0
        getDicts(this.productDictVo).then(res => {	
			this.sexData= res.data.filter(item => item.dictType === 'user_sex')
            this.ageData =  res.data.filter(item => item.dictType === 'user_age')
        })
    },
}
</script>

<style scoped>
.content{
    width: 100%;
    height: 100%;
    padding-top: 10px;
}
.info-box{
    margin-top: 20px;
}
.steps-box{
    margin-bottom: 50px;
}
::v-deep .el-step__title{
    font-size: 14px;
}
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.button-box{
    display: flex;
    justify-content: center;
    margin-top: 10%;
}
</style>